<template>
    <view class="knowledge-detail-wrapper">
        <!-- 顶部装饰元素 -->
        <view class="top-decoration">
            <view class="deco-line"></view>
            <view class="deco-icon">
                <text class="icon-text">非遗</text>
            </view>
            <view class="deco-line"></view>
        </view>
        <!-- 主体内容区域 -->
        <view class="main-content">
            <!-- 标题部分 -->
            <view class="title-container">
                <view class="title-inner">
                    <text class="title-text">{{knowledgeItem.informationTitle}}</text>
                    <text class="sub-title">{{knowledgeItem.createTime}}</text>
                </view>
            </view>
            <!-- 图片与文本内容部分 -->
            <view class="content-section">
                <img :src="knowledgeItem.infromationImg" class="content-image" alt="资讯图片">
                <view class="text-content">
                    <text class="content-text">{{knowledgeItem.informationText}}</text>
                    <a :href="knowledgeItem.informationLink" class="link-text" target="_blank">{{knowledgeItem.informationLink}}</a>
                </view>
            </view>
        </view>
      
    </view>
</template>

<script>
	export default {
		data() {
			return {
				knowledgeItem: {}
			};
		},
		onLoad(option) {
		    let id =option.id;
			uni.request({
				url: this.$BASE_URL.baseUrl+'/home/information/'+id,
				success: (res) => {
					this.knowledgeItem =res.data.data
				}
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">.knowledge-detail-wrapper {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'STKaiti', sans-serif;
    background-color: #f5f0e5; // 类似宣纸的淡米黄色背景，营造传统氛围
    padding: 20px;

    // 顶部装饰元素样式
   .top-decoration {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

       .deco-line {
            flex: 1;
            height: 2px;
            background-color: #98A09F; // 与非遗主题相关的棕红色系线条颜色
        }

       .deco-icon {
            background-color: #762428;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

           .icon-text {
                color: #f8e8d0;
                font-size: 16px;
                font-family: 'STKaiti';
            }
        }
    }

    // 主体内容区域样式
   .main-content {
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        background-color: #fff9f0; // 主体内容区稍亮的底色，区分背景
        padding: 30px;

        // 标题部分样式
       .title-container {
            text-align: center;
            margin-bottom: 30px;

           .title-inner {
                display: flex;
                flex-direction: column;
                align-items: center;

               .title-text {
                    font-size: 24px;
                    font-weight: bold;
                    color: #5a3a2b;
                    margin-bottom: 10px;
                }

               .sub-title {
                    font-size: 16px;
                    color: #888;
                }
            }
        }

        // 图片与文本内容部分样式
       .content-section {
            display: flex;
            flex-direction: column;
            align-items: center;

           .content-image {
                width: 100%;
                max-width: 600px; // 限制图片最大宽度，避免过大
                border-radius: 8px;
                margin-bottom: 20px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

           .text-content {
                text-align: left;
                width: 100%;
                max-width: 600px; // 文本内容区最大宽度，保持排版整齐

               .content-text {
                    font-size: 18px;
                    line-height: 1.6;
                    color: #333;
                    margin-bottom: 20px;
                }

               .link-text {
                    color: #007aff;
                    text-decoration: underline;
                    word-wrap: break-word;
                }
            }
        }
    }

    // 底部装饰与版权信息等样式
   .bottom-section {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

       .bottom-decoration {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

           .deco-line {
                flex: 1;
                height: 2px;
                background-color: #762428;
            }

           .deco-icon {
                background-color: #762428;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

               .icon-text {
                    color: #f8e8d0;
                    font-size: 16px;
                    font-family: 'STKaiti';
                }
            }
        }

       .copyright-text {
            font-size: 14px;
            color: #888;
        }
    }
}
</style>